<template>
	<view>
		<view class="cart_title">
			<view>共{{goodsAmount.count}}件商品</view>
			<view @click="changeEdit">{{ editType ?'编辑':'完成' }}</view>
		</view>
		<view style="margin-bottom: 100rpx;">
			<cartCard v-for="(item,index) in goodsData" :goodsIndex="index" :key="item.id" :goods="item" @changeGoods="setGoodsData">
				<template slot="two">
					<view class="line"></view>
				</template>
			</cartCard>
		</view>
		<view class="cart_count">
			<view class="count_check">
				<image :src="imgType[checkType]" style="width: 20px;height: 20px;margin-right: 10rpx;" @click="checkData"></image>
				全选
				<text>合计：{{goodsAmount.sumPrice}}</text>
			</view>
			<view class="btn" v-if="editType"> 去结算 {{goodsAmount.count ? '('+goodsAmount.count+')':''}} </view>
			<view class="btn" v-else @click="delGoods"> 删除 </view>
		</view>
		<nav-bar></nav-bar>
	</view>
</template>

<script>
	import CartCard from '@/components/cartCard/cartCard.vue'
	export default {
		components: {
			CartCard
		},
		data() {
			return {
				editType:true,
				imgType: {
					0: '../../static/icon/round.png',
					1: '../../static/icon/answer.png'
				},
				goodsData: [{
						id: 1,
						title: '散装牛干巴晾晒1个，散装牛干巴晾晒1个',
						desc: '新品上市|限购1件',
						price: 18.8,
						oldPrice: 123.3,
						img: '',
						amount: 1,
						checkType: 0,
					},
					{
						id: 2,
						title: '散装牛干巴晾晒2个，散装牛干巴晾晒2个',
						desc: '新品上市|限购1件',
						price: 28.8,
						oldPrice: 123.3,
						img: '',
						amount: 1,
						checkType: 0,
					},
					{
						id: 3,
						title: '散装牛干巴晾晒3个，散装牛干巴晾晒4个',
						desc: '新品上市|限购1件',
						price: 38.8,
						oldPrice: 123.3,
						img: '',
						amount: 1,
						checkType: 0,
					},
					{
						id: 4,
						title: '散装牛干巴晾晒4个，散装牛干巴晾晒4个',
						desc: '新品上市|限购1件',
						price: 48.8,
						oldPrice: 123.3,
						img: '',
						amount: 1,
						checkType: 0,
					},
					{
						id: 5,
						title: '散装牛干巴晾晒5个，散装牛干巴晾晒5个',
						desc: '新品上市|限购1件',
						price: 58.8,
						oldPrice: 123.3,
						img: '',
						amount: 1,
						checkType: 0,
					},
					{
						id: 6,
						title: '散装牛干巴晾晒6个，散装牛干巴晾晒6个',
						desc: '新品上市|限购1件',
						price: 68.8,
						oldPrice: 123.3,
						img: '',
						amount: 1,
						checkType: 0,
					}
				]
			}
		},
		computed:{
			checkType(){
				const hasIdEqualToOne = this.goodsData.every(obj => obj.checkType === 1);
				return hasIdEqualToOne ? 1 : 0
			},
			goodsAmount(){
				const sumPrice = this.goodsData.reduce((accumulator, currentProduct) => {
					if(currentProduct.checkType){
						return accumulator + currentProduct.amount * currentProduct.price;
					}else{
						return accumulator
					}
				}, 0).toFixed(2);
				const count = this.goodsData.reduce((accumulator, currentProduct) => {
					if(currentProduct.checkType){
						return accumulator + currentProduct.amount;
					}else{
						return accumulator
					}
				}, 0);
				return {
					count,
					sumPrice
				}
			}
		},
		methods: {
			delGoods(){
				this.goodsData = this.goodsData.filter(item =>{
					return item.checkType === 0
				})
			},
			changeEdit(){
				this.editType = !this.editType 
			},
			checkData(){
				let type = 1
				if(this.checkType){
					type = 0
				}
				this.goodsData = this.goodsData.map(item =>{
					item.checkType = type
					return item
				})
				
			},
			setGoodsData(type,key,index){
				if(type === 'amount'){
					if(key < 1){
						if(this.goodsData[index][type] === 1){
							return 
						}
						this.goodsData[index][type] = this.goodsData[index][type] + key
					}else{
						this.goodsData[index][type] = this.goodsData[index][type] + key
					}
				}else{
					
					this.goodsData[index][type] = key ? 1 : 0
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.cart_title {
		display: flex;
		justify-content: space-between;
		padding: 4rpx 33rpx;
	}

	.cart_count {

		position: fixed;
		bottom: 75px;
		left: 0;
		right: 0;
		background: #FFFFFF;
		// background: red;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;

		.count_check {
			display: flex;
			align-items: center;

			text {
				margin-left: 30rpx;
			}
		}

		.btn {
			border-radius: 104rpx;
			background: linear-gradient(90deg, rgba(244, 6, 0, 1) 0%, rgba(255, 75, 22, 1) 100%);
			height: 80rpx;
			padding: 0px 60rpx;
			line-height: 80rpx;
			color: #ffffff;
		}
	}

	.line {
		height: 1rpx;
		background-color: #F4F4F4;
		margin: 0px 50rpx;
	}
</style>